<template>
    <div
     	class="my_money"
		:class="{
		'my_active': !$util.isEmpty(link)
		}"
    	@click="go"
    >
        <div class="my_left">
            <slot name="title">{{title}}</slot>
        </div>
        <div
            :class="['my_right',arrowsRight?'isLink':'' ]">
            <slot  name="value">
				{{value}}
			</slot>
        </div>
         <slot name="child"></slot>
         <div class="line" v-if="isLine"/>
	</div>
</template>
<script>
export default {
	name: 'cell',
	props: {
		title: {
			type: String
		},
		value: {
			type: String
		},

		link: {
			type: String,
			default: ''
		},
		arrowsRight: {
			type: Boolean,
			default: true
		},
		color: {
			type: String
		},
		goBack: {
			type: Function
		},
		isLine: {
			type: Boolean,
			default: true

		}
	},
	beforeRouteEnter(to, from, next) {
		next(vm => {
		    vm.reLoad()
		})
	},
	beforeRouteUpdate(to, from, next) {
		this.reLoad()
		next()
	},
	methods: {
		go() {
			if (this.link) {
				uni.navigateTo({
					url: this.link
				})
			}
			this.$emit('goBack')
		}
	},
	mounted() {
	}
}
</script>
<style scoped lang="scss">
	* {
		box-sizing: border-box;
	}
    .my_money{
        min-height: 88px;
        background-color: #fff;
        position: relative;
        display:flex;
        justify-content: center;
		align-items: center;
		position: relative;
        .line{
            position:absolute;
            height: 1px;
            width: 100%;
            bottom: 0;
            border-bottom:1px solid #ebedf0;
        }
	& > div:nth-child(1){
	   font-size: 24px;
       color: #666;
	   width: 180px;
	   display:inline-block;
	   & > span{
		   display:inline-block;
	   }
	}
	& > div:nth-child(2){
		color:#4d4d4d;
		font-size: 28px;
        position: relative;
        flex: 1;
		padding-right: 50px;
		box-sizing: border-box;

	}
}
.isLink::after{
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    border-width:2px 2px 0 0;
    border-color:#C8C8CD;
    border-style:solid;
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translate(0,-50%) matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
}
.my_active{
  tap-highlight-color: rgba(0,0,0,0);
  user-select:none;
}
.my_active:active{
  background-color:#ECECEC;
}

</style>
